HTNL

• HTML = Hyper Text Markup Languare (超文本標記語言)
  • 寫給瀏覽器看的
  • HTML 不是一種程式語言
• HTML WiKi：HTML 是一種用於建立網頁的標準標記語言，網頁瀏覽器可以讀取 HTML 檔案，並將其彩現成視覺化網頁

CSS

• CSS = Cascading Style Sheets (階層式樣式表)
  • 目的是美化排版
• CSS WiKi：CSS 是一種用來為結構化文件（如 HTML 文件或 XML 應用）添加樣式（字型、間距和顏色等）的電腦語言

關係

• HTML、CSS 與 JS 的關係？
  • HTML = 結構 = 一個人
  • CSS = 樣式 = 各種髮色、衣服長短
  • JavaScript = 互動 = 走路、跑步

牛刀小試

• 基本上之後都會把練習的架構列出來，確保資訊一致，才不會出現無法連結的問題
• 資料架構，未列副檔名的為資料夾
  • project
    • index.html

task 1：建立第一個檔案

• 建立一個檔案名稱為 index，副檔名為 .html，輸入以下內容後存檔
  • VS Code：檔案=>新增檔案 (Ctrl + N)，尚未確定檔案格式
  • VS Code：檔案=>儲存 (Ctrl + S)，第一次儲存時，存檔類型選 HTML

index.html

<h1>Hello World !!!</h1>

• 將檔案拖曳至 Chrome
  • 或是直接點擊，應該會以操作的電腦中的預設網頁瀏覽器開啟
• 若順利看到黑色的 Hello World !!! 即成功

task 2：增加 CSS，改顏色

• 重新開啟 index.html，將內容修改如下

index.html

<h1 style="color:red">Hello World !!!</h1>

• 將檔案拖曳至 Chrome
• 若順利看到紅色的 Hello World !!! 即成功

次回

繼續進行 HTML 的練習